<template>
  <el-dialog
    v-model="centerDialogVisible"
    width="30%"
    align-center
    color="white"
    style="background-color: #000000a2"
  >
    <header class="el-dialog__header">
      <span role="heading" class="el-dialog__title" style="color: white">{{
        books.bookName
      }}</span>
    </header>
    <div
      id="el-id-4400-144"
      class="el-dialog__body"
      style="justify-content: space-evenly"
    >
      <div class="cover">
        <img :src="books.bookCover" alt="封面" />
      </div>
      <span
        ><el-button type="" style="background-color: #000000a2" @click="add()">
          +
        </el-button></span
      >

      <p class="context">购买数量：{{ quantity }}</p>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取消</el-button>
        <el-button type=" " class="buy" @click="returnalipay()" v-if="total != 0">
          你需支付{{ total }}
        </el-button>
      </span>
    </template> 
    <order @buy="buy" v-show="false" ></order>
  </el-dialog>
 
</template>
  <script>
  import Order from '../qiantai/Order.vue'
export default {
  name: "BuyDialog",
  components:{Order},
  data() {
    return {
      centerDialogVisible: false,
      books: [],
      quantity: 0,
      total: 0,
      item: [],
      userId: 0,
      alipayBean: {
        subject: "books.bookName",
        total_amount: "total",
        body: "",
      },
     
    };
  },
  created: function () {
    this.userName = sessionStorage.getItem("userName");
    console.log(this.userName);
    this.userId = sessionStorage.getItem("userId");
    console.log(this.userId);
  },

  methods: {
    // loadbooks() {
    //   this.$axios.get("/getbooks").then((resp) => {
    //     this.books = resp.data;
    //     console.log(resp.data);
    //     console.log(this.books);

    //   });
    // },
    add() {
      this.quantity = this.quantity + 1;
      this.total = this.quantity * this.books.inPrice;
    },
    buyChangeQuantity() {
      console.log(this.item);

      var data = new FormData();
      data.append("buyquantity", this.quantity);
      data.append("item", this.item.bookId);
      this.$axios.post("/buyChangeQuantity", data).then((resp) => {
        // this.loadbooks();
        this.$emit("books", this.books);

        (this.quantity = 0),
          (this.total = 0),
          (this.centerDialogVisible = false);
      });
    },
    buy() {

      console.log("执行buy方法");
           this.$axios.post("/buyfirst", this.books).then((resp) => {
            var data = new FormData();
            data.append("quantity", this.quantity);
            data.append("total", this.total);
            data.append("userId", this.userId);
            this.$axios.post("/buy", data).then((resp) => {
              if (resp.data.code == 200) {
                this.buysucess();
                this.buyChangeQuantity();
              }
            });
          });
         
         
       
    

     
      //   this.$axios.post("http://localhost:8442/alipay", this.alipayBean).then(resp => {
      //   console.log(resp.data);
      // })

      // data.append('books', JSON.stringify(this.books))
    },
    returnalipay() {
       this.$router.replace("/alipay");
    },
    
    buysucess() {
      this.$message({
        message: "购买成功",
        type: "success",
      });
    },

    // listenerQuantityAndTotal() {
    //   if (this.centerDialogVisible == false) {
    //     this.quantity = 0
    //     this.total = 0
    //   }
    // }
  },

  mounted: function () {
    // this.loadbooks();
    // this.listenerQuantityAndTotal()

  },
};
</script>
  <style scoped>
#el-id-4400-144 {
  display: flex;
  padding: 0;
  color: var(--el-text-color-regular);

  font-size: var(--el-dialog-content-font-size);
  /* background-color: #000000a2; */

  word-break: break-all;
}
.context {
  color: white;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
.el-button:hover {
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24),
    0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
.buy {
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24),
    0 17px 50px 0 rgba(0, 0, 0, 0.19);
  background-color: #000000a2;
}
</style>